<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.main_container{
			 position: absolute;
			 left: 50%;
			 top: 50%;
			transform: translate(-50%,-50%);
		}
		.tooltip {
		    position: relative;
		    display: inline-block;
		    border-bottom: 1px dotted black;
		}
		.tooltip::before {
			content: attr(data-tip);
			display: block;
			position: absolute;
			background-color: black;
			color: #fff;
			top:-35px;
			padding: 5px;
			white-space: nowrap;
			border-radius: 6px;
		}
		.tooltip::after {
		    content: "";
		    position: absolute;
		    top: -4px;
		    left: 8px;
		    border-width: 5px;
		    border-style: solid;
		    border-color: black transparent transparent transparent;
		}
		
		/* 初始状态下不显示 */
		.tooltip::after,.tooltip::before{
			display:none;
		}
		
		/* 选中后显示 */
		.tooltip:hover::after,.tooltip:hover::before  {
		   display: block;
		}
		
		
	</style>
	<body>
		<div class="main_container">
			
			<div class="tooltip" data-tip="提示信息">鼠标移动到我这
			</div>
			
			
			
		
		</div>
	
	</body>
</html>